<template>
  <div class="main">
    <div class="left">
      <div class="header">
        <span class="title">当日园区总负荷</span>
        <span class="time">时间：{{moment(new Date()).format('YYYY-MM-DD')}}</span>
      </div>
      <div class="left-content">
        <div id="main_load" :style="{width: echartsWidth}"></div>
      </div>
    </div>
    <div class="right">
      <div class="list">
        <div class="card" v-for="(item, index) in dataList" :key="index">
          <div class="title">{{item.title}}</div>
          <div :class="[item.color]">
            <span class="num">{{item.num}}</span>
            <span class="unit">{{item.unit}}</span>
          </div>
          <div>
            <span class="icon iconfont icon-a-16Cjishishizhong"></span>
            <span class="time"> {{item.time}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getEnergyDayList } from '@/api/datastatistics/meterread/energyReport.js'
import * as echarts from "echarts";

export default {
  name: "Load",
  props: ['sidebar'],
  computed: {
    moment() {
      return moment
    },
    echartsWidth() {
      let width = '0px'
      if (this.sidebar.opened) {
        width = '670px'
      }else{
        width = '724px'
      }
      return width
    }
  },
  watch: {
    'sidebar.opened': function() {
      // 先移除之前的事件监听器
      window.removeEventListener('resize', this.handleResize);
      // 绑定新的事件监听器
      window.addEventListener('resize', this.handleResize);
      // 立即调用一次 resize，确保图表适配当前窗口大小
      this.handleResize();
    }
  },
  data(){
    return {
      myChart: null,
      // 当日总负荷统计
      dataList: [
        {title: '今日最大值', num: 0, unit: 'kW', color: 'c_ff9f3f', time: '00:00'},
        {title: '今日最小值', num: 0, unit: 'kW',color: 'c_ff9f3f', time: '00:00'},
        {title: '昨日最大值', num: 0, unit: 'kW',color: 'c_8a70f7', time: '00:00'},
        {title: '昨日最小值', num: 0, unit: 'kW', color: 'c_8a70f7', time: '00:00'},
      ],
      // 图表配置
      option: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: 20, //距离左侧距离
          y: 60,//距离顶部距离
          x2: 55, //距离右侧距离
          y2: 5, //距离底部距离
          containLabel: true,
          // right: 38,
        },
        legend: {
          itemWidth: 12, // 图标宽度
          itemHeight: 12, // 图标高度
          // x: 'right', // 图例水平居中
          y: 'top', // 图例垂直居中
          data: ['昨日','今日'],
          right: '40px',
          top: '20px',
          icon: 'circle',
        },
        xAxis: {
          name: '时间',
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis:  {
          name: '单位：kW',
          type: 'value'
        },
        series: [
          {
            name: '昨日',
            type: 'line',
            data: [],
            smooth: false,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 7,    //小圆点的大小
            itemStyle: {
              color: '#8a70f7'    //小圆点和线的颜色
            },
          },
          {
            name: '今日',
            type: 'line',
            data: [],
            smooth: false,      //true 有弧度 ，false 没弧度（直线）
            symbol: 'circle',   //将小圆点改成实心 不写symbol默认空心
            symbolSize: 7,    //小圆点的大小
            itemStyle: {
              color: '#ff9f3f'    //小圆点和线的颜色
            },
          }
        ]
      }
    }
  },
  methods: {
    handleResize() {
      if (this.myChart) {
        this.$nextTick(function () {
          this.myChart.resize();
        })
      }
    },
    initEcharts() {
      const chartDom = document.getElementById('main_load'); // 确保 DOM 容器存在
      this.myChart = echarts.init(chartDom)
      this.myChart.setOption(this.option);
    },
    loadChartData(){
      getEnergyDayList().then(response => {
        let dd = response.data;
        let yesterDayMap = dd.yesterDayMap;
        let todayMap = dd.todayMap;
        this.option.xAxis.data = dd.dayMonthList;
        this.option.series[0].data = yesterDayMap.hourDataList;
        this.option.series[1].data = todayMap.hourDataList;
        this.myChart.setOption(this.option);

        //最大，最小
        this.dataList= [
          {title: '今日最大值', num: todayMap.maxValue, unit: 'kW', color: 'c_ff9f3f', time: todayMap.maxHour},
          {title: '今日最小值', num: todayMap.minValue, unit: 'kW',color: 'c_ff9f3f', time: todayMap.minHour},
          {title: '昨日最大值', num: yesterDayMap.maxValue, unit: 'kW',color: 'c_8a70f7', time: yesterDayMap.maxHour},
          {title: '昨日最小值', num: yesterDayMap.minValue, unit: 'kW', color: 'c_8a70f7', time: yesterDayMap.minHour},
        ];
      });
    }
  },
  mounted() {
    this.initEcharts();
    this.loadChartData();
  }
}
</script>
<style scoped lang="scss">
@import '../../../assets/styles/summarize.scss';
.right{
  height: 334px;
  .card{
    padding: 4px 10px;
    .title{
      font-size: 14px;
      color: #646464;
      line-height: 24px;
    }
    .num, .unit{
      font-size: 16px;
      line-height: 24px;
      font-weight: 550;
    }
    .icon{
      line-height: 24px;
      margin-top: 5px;
    }
    .time{
      font-size: 14px;
      color: #646464;
    }
  }
}
#main_load{
  //width: 650px;
  height: 298px;
}

</style>
